<template>
    <div v-if="props.message!.messageFrom % 3 === 0" class="message-div">
      <User class="message-icon message"/>
      <div class="message-box">
        <div class="message-user">{{ props.message!.userName }}</div>
        <TextMessage v-if="props.message?.messageType == 1" :message="props.message"/>
        <RedEnvelopMessage v-else-if="props.message?.messageType == 2" :message="props.message"/>
      </div>
    </div>
    <div v-else-if="props.message!.messageFrom % 3 === 1" class="message-div message-div-self">
      <div class="message-box">
        <div class="message-user user-self">{{ props.message!.userName }}</div>
        <TextMessage v-if="props.message?.messageType == 1" :message="props.message"/>
        <RedEnvelopMessage v-else-if="props.message?.messageType == 2" :message="props.message"/>
      </div>
      <User class="message-icon message"/>
    </div>
    <MiddleMessage :message="props.message" v-else />
</template>
  
 <script lang="ts" setup>
  import TextMessage from './TextMessage.vue';
  import RedEnvelopMessage from './RedEnvelopMessage.vue';
  import MiddleMessage from './MiddleMessage.vue';
  const props = defineProps({
     "message": Object
  })
</script>
  
<style scoped>
    .message-div {
      flex-wrap: wrap;
      display: flex;
      height: auto;
      padding: 5px;
    }
    .message-div-inner {
      flex-wrap: wrap;
      display: flex;
      height: auto;
    }
    .message-div-self {
      justify-content: flex-end;
    }
    .message {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .message-icon{
      width: 3em; 
      height: 3em; 
      margin-right: 8px;
    }
    .message-user {
      font-size: 70%;
    }
    
    .user-self {
      text-align: right;
    }
    .message-box {
      max-width: 50%;
      display: flex;
      flex-direction: column;
      height: auto;
    }
  </style>